<template>
  <el-form
    ref="formCompRef"
    :model="formData"
    v-bind="layoutConfig.formLayout"
    class="form-wrapper"
  >
    <Draggable
      class="draggable-wrapper outer"
      ghostClass="ghost"
      :list="displayFormFields"
      item-key="index"
      :group="{ name: 'fields' }"
      :animation="200"
      handle=".el-icon-drag"
      @sort="handleDraggableSort"
    >
      <template #item="{ element: field }">
        <div
          v-if="field.type == 'subForm'"
          class="sub-form-field-wrapper drag-item"
          :class="{ selected: currentFormKey === field.id }"
        >
          <i v-if="currentFormKey === field.id" class="el-icon-drag"></i>
          <SubFormRenderer
            :field="field"
            :layoutConfig="layoutConfig"
            @selectField="handleSelectCol"
          />
        </div>
        <div
          v-else-if="field.type == 'groupForm'"
          class="sub-form-field-wrapper drag-item"
          :class="{ selected: currentFormKey === field.id }"
        >
          <i v-if="currentFormKey === field.id" class="el-icon-drag"></i>
          <GroupFormRenderer
            :field="field"
            :layoutConfig="layoutConfig"
            @selectField="handleSelectCol"
          />
        </div>
        <div v-else>未实现</div>
      </template>
    </Draggable>
  </el-form>
</template>

<script setup>
import { ref, inject, computed } from "vue";
import Draggable from "vuedraggable";
import { useFormStore } from "@/store/form";
import SubFormRenderer from "./components/SubFormRenderer.vue";
import GroupFormRenderer from "./components/GroupFormRenderer.vue";
import { fieldFactory } from "@/views/FormGenerator/util";

const props = defineProps({
  mode: { type: String, default: "add" },
  layoutConfig: { type: Object, default: () => ({}) },
  formFields: { type: Array, default: () => [] },
});
const emits = defineEmits(["selectField"]);

const store = useFormStore();
const fieldListTools = inject("fieldListTools");

const formCompRef = ref(null);
const formData = ref({});
const currentFormKey = ref("");
const displayFormFields = computed(() =>
  props.formFields.filter((item) => item.fieldList.length > 0)
);

function handleSelectCol(record) {
  currentFormKey.value = record.formKey;
  emits("selectField", record);
}

// 添加字段
function handleDraggableAdd(event) {
  const {
    newIndex,
    item: {
      dataset: { compType },
    },
  } = event;
  if (!compType) return;
  // console.log("handleDraggableAdd", event, compType, newIndex);
  fieldListTools.add(fieldFactory(compType), newIndex);
}

// 字段排序
function handleDraggableSort(event) {
  const { oldIndex, newIndex, item } = event;
  // 从按钮列表过来的移动，return false
  if (item.classList.contains("menu-item")) return;
  // console.log("handleDraggableSort", oldIndex, newIndex, item);
  fieldListTools.swap(oldIndex, newIndex);
}
</script>

<style lang="less" scoped>
:deep(.ant-row) {
  min-height: 60px;
}
.form-wrapper {
  height: 100%;
  overflow-y: auto;
}
.row-wrapper {
  padding: 10px;
  box-shadow: var(--el-box-shadow-light);
}
.sub-form-field-wrapper {
  padding: 10px;
}
.col-wrapper {
  padding-top: 5px;
  &:hover {
    background: #f6f7ff;
  }
  &.selected {
    background: #f6f7ff;
  }
}
.draggable-wrapper {
  width: 100%;
  &.outer {
    height: 100%;
  }
}
.drag-item {
  position: relative;
  &.selected {
    position: relative;
    border: 1px solid #409eff;
    .el-icon-drag {
      position: absolute;
      top: -5px;
      left: -5px;
      width: 20px;
      height: 20px;
      background: #409eff;
    }
  }
}
</style>

<style>
.ghost {
  opacity: 0.1;
  background: #409eff;
}
</style>
